<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="notice_title" label="公告标题" />
    <el-table-column prop="publish_time" label="发布时间" width="160" />
    <el-table-column prop="handle" label="操作" width="220">
      <template v-slot="hhh">
        <el-button type="primary" round size="small" @click="handleViewNotice(hhh.row.id)"
          >查看公告</el-button
        >
        <el-button type="danger" round size="small" @click="handleDeleteNotice(hhh.row.id)"
          >删除公告</el-button
        >
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page="currentPage"
    :page-sizes="[5, 10, 20, 50]"
    :page-size="pageSize"
    layout="total, sizes, prev, pager, next, jumper"
    :total="total"
  />
  <el-dialog title="公告详情" v-model="dialogVisibleAbout">
      <div class="title">{{ title }}</div>
      <div class="content">{{ content }}</div>
  </el-dialog>
</template>

<script lang="ts" setup>
// import aboutNotice from './components/aboutNotice.vue'
import { getnoticesHttp, delnoticePut,getOnenoticeHttp } from '../../../../request/noticeHttp'
import { ref, onMounted } from 'vue'

const tableData = ref([])
const currentPage = ref(1)
const pageSize = ref(5)
const total = ref(0)
const notice_status = ref(0)
const dialogVisibleAbout = ref(false)
const title =ref()
const content =ref()
onMounted(() => {
  fetchData()

})


const fetchData = async () => {
  const res = await getnoticesHttp(currentPage.value, pageSize.value)
  if (res.data.code === 0) {
    tableData.value = res.data.result.data
    total.value = res.data.result.total
  }
}
const handleSizeChange = (e) => {
  pageSize.value = e
  fetchData()
}

const handleCurrentChange = (e) => {
  currentPage.value = e
  fetchData()
}

const handleViewNotice = async(id) => {
  // console.log(id)
  dialogVisibleAbout.value = true
  const res = await getOnenoticeHttp(id)
  content.value =res.data.result.notice_content
  title.value =res.data.result.notice_title
}

const handleDeleteNotice = (id) => {
  // console.log(id)
  delnoticePut(id, notice_status.value)
    .then((res) => {
      // console.log(res)
      alert('删除成功')
    })
    .catch((err) => {
      // console.log(err)
      alert('删除失败')
    })
  fetchData()
}
</script>

<style lang="less" scoped>
.title{
  display: flex;
  justify-content: center;
  font-size: 25px;
}
.content{
  display: flex;
  justify-content: center;
  margin-top: 20px;
  font-size: 15px;
}
.footer {
  margin-top: 20px;
  margin-left: 75%;
}
</style>
